<template>
    <div>
        <ul class="list">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    loading-text="加载中"
                    :immediate-check="false"
                    @load="onLoad"
            >
                <li v-for="(item, index) in mylist">
                    <div class="line01">
                        <div class="time">{{item.createtime}}</div>
                        <div class="line01_r">
                            <img :src="item.avatar"/>
                            <span>{{item.nickname}}</span>
                        </div>
                    </div>
                    <div class="line02">
                        <div class="txt">{{item.materialstitle}}</div>
                        <div class="line02_r">
                            <span v-if="item.status==1" @click="txShowClick(item.money,1)">
                                <span class="txBtn">体育资讯</span>
                            </span>
                            <span v-else @click="txShowClick(item.money,2)">
                                <span class="txBtn">体育资讯</span>
                                <!--<span v-else>消费-{{item.money}}</span>-->
                            </span>
                            <!--<img style="width: 12px;height: 12px" src="../../assets/img/money_icon.png"/>-->
                        </div>
                    </div>
                </li>
            </van-list>

        </ul>
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return {
                loading: false,
                finished: false,
                page:1,
                mylist:[]
            }
        },
        mounted(){
            this.getList();
        },
        methods:{
            //触底加载更多
            onLoad() {
                // 异步更新数据
                this.page++;
                this.getList();
            },
            txShowClick(money,type){
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: type == 1?`消费-${money}`:`退款+${money}`,
                    showCancelButton: false,
                    overlayStyle: {backgroundColor: 'black'}
                })
                    .then(() => {
                        // on confirm
                    })
            },
            getList(){
                var that=this;

                that.request1.post1({
                    url: that.Url + "/api/user.index/accountdetails",
                    params: {page:that.page},
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            var ress=res.data.data.data;
                            if (ress.length < 1 || ress == null ) {
                                // 加载结束
                                that.finished = true;
                                return;
                            }else {
                                that.mylist.push.apply(that.mylist,ress)
                            }
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .txBtn{
        border: 0.5px solid #4482E4;
        background: #4482E4;
        border-radius:5px;
        color: #fff !important;
        font-size: 12px;
        padding: 1px 6px;
    }

    .list li{
        background: #fff;
        padding: 14px;
        box-sizing: border-box;
        border-bottom: 1px solid #efeff4;
        font-size: 12px;
    }
    .list .line01{
        width: 100%;
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
    }
    .list .line01 .time{
        color: #666;
    }
    .list .line01 .line01_r{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width:calc(100% - 160px);
    }
    .list .line01 .line01_r img{
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }
    .list .line01 .line01_r span{
        max-width: calc(100% - 34px);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .list .line02{
        margin-top:6px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .list .line02 .txt{
        width: calc(100% - 100px);
        font-size: 14px;
    }
    .list .line02 .line02_r{
        width: 98px;
        text-align: right;
    }
    .list .line02 .line02_r span{
        color: #d0a200;
    }
</style>